<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="消息通知" width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px"
          >{{ scope.row.title }}
        </span>
      </template>
    </el-table-column>

    <el-table-column label="">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit1(scope.$index, scope.row)"
          >详情</el-button
        >
      </template>
    </el-table-column>

    <el-table-column label="" width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ timestampToTime(scope.row.message_time) }}</span>
      </template>
    </el-table-column>

    <el-table-column label="" width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ ifStatu2(scope.row.type) }}</span>
      </template>
    </el-table-column>

    <el-table-column label="">
      <template slot-scope="scope">
         
        <div v-show="scope.row.status>0"><el-badge value=""  class="item"></el-badge> </div>
        <div v-show="scope.row.status<1"><el-badge value="new"  class="item"></el-badge> </div>    
      </template>
    </el-table-column>
  </el-table>
  
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      
      
    };
  },
  methods: {
    handleEdit1(index, row) {

      this.open(row);
      
      
    },
    open(row) {
        this.$alert(row.content, '消息详情', {
          confirmButtonText: '确定',
          callback: action => {
            this.update(row.id);
            this.$message({
              type: 'info',
              message: ``
            });
          }
        });
      },
      update(id){
        axios
            .get("http://localhost:3031/updateStatus", {
              params: {
                id: id,
                
              },
            })
            .then((resp) => {
              
              this.init();
            });
      },
    handleDelete(index, row) {
      console.log(index, row);
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp);
      console.log(date);
      var str = date.toString();
      str = str.replace(/ GMT.+$/, ""); // Or str = str.substring(0, 24)
      var d = new Date(str);
      var a = [
        d.getFullYear(),
        d.getMonth() + 1,
        d.getDate(),
        d.getHours(),
        d.getMinutes(),
        d.getSeconds(),
      ];
      for (var i = 0, len = a.length; i < len; i++) {
        if (a[i] < 10) {
          a[i] = "0" + a[i];
        }
      }
      str =
        a[0] + "-" + a[1] + "-" + a[2] + " " + a[3] + ":" + a[4] + ":" + a[5];
      return str;
    },
    ifStatu2(data1) {
      if (data1 == 1) {
        return "警方发布";
      } else if ((data1 = 2)) {
        return "免疫机构发布";
      } else {
        return "其他";
      }
    },
    init(){
      axios
      .get("http://localhost:3031/selectMesage", {
        params: {
          account:this.$store.state.useraccount
        },
      })
      .then((resp) => {
        this.tableData = resp.data;
      });
    }
  },

  mounted() {
    this.init();
  },
  computed: {},
};
</script>
<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
